<template>
  <view class="u-wrap u-skeleton">
    <view class="radio-choose boxShadow u-skeleton-rect">
      <!-- <u-radio-group v-model="typeValue" @change="radioGroupChange">
        <u-radio
          v-for="(item, index) in list"
          :key="index"
          :name="item.title"
          active-color="#d65c45"
        >
          {{ item.title }}
        </u-radio>
      </u-radio-group> -->
      <!-- <uni-segmented-control
        :current="typeId - 1"
        :values="list"
        @clickItem="onClickItem"
        style-type="button"
        active-color="#d65c45"
      ></uni-segmented-control> -->

      <!-- 散装整装 -->
      <view class="type-list">
        <view
          v-for="(item, index) in list"
          :key="index"
          @click="onClickItem(item)"
          :class="[typeId == item.id ? 'choose-type' : '']"
        >
          {{ item.title }}</view
        >
      </view>
    </view>
    <view class="u-menu-wrap">
      <scroll-view
        scroll-y
        scroll-with-animation
        class="u-tab-view menu-scroll-view u-skeleton-rect"
        :scroll-top="scrollTop"
      >
        <view
          v-for="(item, index) in tabbar"
          :key="index"
          class="u-tab-item"
          :class="[current == index ? 'u-tab-item-active' : '']"
          :data-current="index"
          @tap.stop="swichMenu(index, item)"
        >
          <text class="u-line-1">{{ item.title }}</text>
        </view>
      </scroll-view>
      <block v-for="(item, index1) in tabbar" :key="index1" class="foods-info">
        <scroll-view
          scroll-y
          class="right-box"
          v-if="current == index1"
          @scrolltolower="$u.throttle(scrolltolower, 500)"
        >
          <!-- 无商品 -->
          <u-empty
            text="该分类下，无商品"
            mode="list"
            v-if="goodsList.length === 0"
          ></u-empty>
          <!-- 有商品 -->
          <view class="page-view" v-else>
            <view
              class="foods-info"
              v-for="(item, index) in goodsList"
              :key="index"
            >
              <view class="image-contair u-skeleton-fillet">
                <image :src="item.cover" class="image" />
                <!-- 库存==0 展示mask -->
                <view class="mask" v-if="item.storage == 0 ? true : false">
                  已售馨</view
                >
              </view>

              <view class="foods-detail">
                <view>
                  <view class="foods-title u-line-2 u-skeleton-fillet">{{
                    item.title
                  }}</view>
                  <view class="foods-stock u-skeleton-fillet">
                    <view>￥{{ item.price / 100 }}</view>
                    <view v-if="item.package_type_id != 2">建议零售价:￥{{ item.sale_price / 100 }}</view>
                  </view>
                </view>
                <view>
                  <u-tag
                    v-if="item.items.length == 1"
                    :text="item.items[0].min_number + '件起售'"
                    :closeable="false"
                    size="mini"
                    type="error"
                    mode="dark"
                    :style="{ marginRight: '10rpx' }"
                  />
                  <u-tag
                    v-if="item.items.length == 1 && item.package_type_id != 1"
                    :text="'邮费' + item.items[0].freight / 100 + '元'"
                    :closeable="false"
                    size="mini"
                    type="warning"
                    mode="dark"
                  />
                </view>
                <view class="foods-price-car u-skeleton-fillet">
                  <view class="foods-price">
                    <view>库存：{{ item.storage }}</view>
                  </view>
                  <!-- 库存==0 不展示 -->
                  <!-- <view
                    v-if="item.storage == 0 ? false : true"
                    class="add-car iconfont icon-add-fill"
                    @tap.stop="add(item)"
                  ></view> -->

                  <!-- 单规格 -->
                  <view
                    class="buy-num"
                    v-if="
                      (item.storage == 0 ? false : true) &&
                      item.items.length == 1
                    "
                  >
                    <!-- 购买数量为0 不展示 -->
                    <view
                      v-if="item.items[0].number > 0"
                      class="iconfont icon-jian jian"
                      @click="reduceBuyCount(item, index)"
                    ></view>
                    <!-- 购买数量为0 不展示 -->
                    <view class="num" v-if="item.items[0].number > 0">{{
                      item.items[0].number
                    }}</view>
                    <view
                      class="iconfont icon-add-fill jia"
                      @click.stop="add(item)"
                    ></view>
                  </view>
                  <!--多规格 -->
                  <view
                    v-else-if="
                      (item.storage == 0 ? false : true) &&
                      item.items.length > 1
                    "
                  >
                    <u-tag
                      text="选规格"
                      shape="circle"
                      size="default"
                      mode="dark"
                      bg-color="#d65c45"
                      @click.stop="add(item)"
                    />
                  </view>
                  <!-- 以销售完 -->
                  <view v-else style="color: red"> 已售馨</view>
                </view>
              </view>
            </view>
          </view>

          <tui-loadmore
            text="加载中..."
            v-show="loadingShow"
            :index="3"
            type="red"
          ></tui-loadmore>
          <tui-nomore v-show="noMore"></tui-nomore>
        </scroll-view>
      </block>
    </view>
    <!-- <tui-numberbox :value="value2" :step="10" @change="change2"></tui-numberbox> -->

    <view class="u-skeleton-fillet boxShadow">
      <view
        class="limit"
        v-if="show_price_limit == true || show_num_limit == true"
      >
        <!-- 价格限值 -->
        <view v-if="show_price_limit == true">
          <view v-if="limitData.price_limit == true ? true : false">
            <span>满￥{{ limit.min_price / 100 }}元才能下单,您已满足</span>
            <span class="iconfont icon-gou1 icon"></span>
          </view>
          <view v-else>
            <span>满￥{{ limit.min_price / 100 }}元才能下单,您还差</span>
            <span class="price">￥{{ limitData.choose_price / 100 }}</span>
            <span>元</span>
          </view>
        </view>
        <!-- 件数限值 -->
        <view v-if="show_num_limit == true">
          <view v-if="limitData.num_limit == false">
            <span>整装满{{ limit.min_unit }}件免运费,您还差</span>
            <span class="price">{{ limitData.choose_num }}</span>
            <span>件</span>
            <!-- <span>(当前邮费:{{ limitData.freight / 100 }}元)</span> -->
          </view>
          <view v-else>
            <span>整装满{{ limit.min_unit }}件免运费,您已满足</span>
            <span class="iconfont icon-gou1 icon"></span>
          </view>
        </view>
      </view>
      <view class="bottom-bar">
        <view class="submit">
          <view>￥{{ totalMoney }}</view>
          <view>
            <view> 共计{{ totalMount }}件 </view>
            <!-- 未满5件 -->
            <view v-if="show_num_limit == true" class="freight"
              >(含邮费:{{ limitData.freight / 100 }})</view
            >
          </view>
        </view>
        <view class="price" @click="lookList">查看进货单</view>
      </view>
    </view>

    <more-kinds ref="moreKinds" />

    <!--引用组件-->
    <u-skeleton
      :loading="loading"
      :animation="true"
      bgColor="#FFF"
    ></u-skeleton>
  </view>
</template>

<script>
import MoreKinds from "./components/moreKind";
import uniSegmentedControl from "@/common/components/uni-segmented-control";
export default {
  components: {
    MoreKinds,
    uniSegmentedControl,
  },
  data() {
    return {
      value2: "",
      loading: true,
      tabbar: [{}, {}, {}, {}, {}, {}, {}, {}, {}], //分类
      goodsList: [{}, {}, {}, {}, {}], //商品list
      scrollTop: 0, //tab标题的滚动条位置
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      loadingShow: false, //加载更多数据
      noMore: false, //是否有多个分页
      storeOrderList: [], //进货订单
      totalMount: 0,
      totalMoney: 0,
      nowCatalogId: "", //当前选择的 分类id
      page: 1,

      //散装还是整装
      list: [],
      typeValue: "",
      typeId: null, //散装/整装 id

      //进货限制
      // address: "人民南路"
      // id: 1
      // min_price: 100   //金额是针对 散装区的
      // min_unit: 2    //数量是针对 整装的
      // title: "中心仓库"
      limit: {
        min_price: null,
        min_unit: null,
      },
      limitData: {
        price_limit: false, //金额限值
        num_limit: false, //数量限值  整装
        //已购买金额
        choose_price: 0,
        //已选择 整件数量
        choose_num: 0,
        //当前邮费 未满要求件数
        freight: 0,
      },
      show_num_limit: false,
      show_price_limit: false,
      choose_num: 0,
    };
  },
  onLoad() {
    this.jihuoMethod()
      .then(() => {
        return this.goodsCatalog();
      })
      .then(() => {
        this.buyLImit();
      });
  },
  onShow() {
    if (this.vuex_order_list.length > 0) {
      this.storeOrderList = this.vuex_order_list;
      this.page = 1;
      this.getGoodsList(this.nowCatalogId);
    }
  },
  watch: {
    storeOrderList: {
      handler(newV, oldV) {
        // 价格恢复
        this.totalMount = 0;
        this.totalMoney = 0;
        this.choose_num = 0;
        this.limitData.freight = 0;
        this.show_num_limit = false;
        this.show_price_limit = false;
        // 重新计算价格
        newV.map((v) => {
          this.totalMount += v.number;
          this.totalMoney += v.info.cost * v.number;
          // 整装  件数++
          if (v.package_type_id === 2) {
            this.choose_num += v.number;
            this.limitData.freight += v.number * v.freight;
          }
        });

        if (this.totalMoney >= this.limit.min_price) {
          this.limitData.price_limit = true;
        } else {
          //计算差多少钱
          this.limitData.choose_price = this.limit.min_price - this.totalMoney;
          this.limitData.price_limit = false;
        }

        //整件购买数量
        if (this.choose_num >= this.limit.min_unit) {
          this.limitData.num_limit = true;
          this.limitData.freight = 0;
        } else {
          //计算差多少件
          this.limitData.choose_num = this.limit.min_unit - this.choose_num;
          this.limitData.num_limit = false;
          //此时需要剪掉邮费
          this.limitData.choose_price =
            this.limitData.choose_price - this.limitData.freight;
        }

        if (this.totalMoney > 0) {
          // 展示 金额提示
          this.show_price_limit = true;
        }
        //展示 整装免邮费提示
        if (this.choose_num > 0) {
          this.show_num_limit = true;
        }
        //总金额
        this.totalMoney = (this.totalMoney + this.limitData.freight) / 100;
      },
      deep: true,
    },
  },
  methods: {
    /**
     * 判断展示但规格还是 多规格
     */
    jugeShowType(info) {
      var juge_one = info.storage == 0 ? false : true;
      var juge_two = info.items.length == 1 ? true : false;
      // 但规格
      if (juge_one && juge_two) {
        return 1;
      } else if (juge_one && !juge_two) {
        return 2;
      } else {
        return 0;
      }
    },
    /**
     * 展示已经选择的数量
     */
    showBuyNum(info) {
      var id = info.id;
      this.storeOrderList.forEach((v) => {
        if (v.goods_item_id === id) {
          info.number = v.number;
        }
      });
    },
    /**
     * 进货分类 散装， 整装....
     */
    jihuoMethod() {
      return new Promise((resolve) => {
        this.$u.api.jinhuoMethodApi().then((res) => {
          // res.map((v) => {
          //   this.list.push(v.title);
          // });
          this.list = res;
          this.typeValue = res[0].title;
          this.typeId = res[0].id;
          resolve();
        });
      });
    },

    /**
     * 商品分类
     */
    goodsCatalog() {
      return new Promise((resolve) => {
        this.$u.api.builderCategoryApi().then((res) => {
          this.tabbar = res;
          // 当前分类id
          this.nowCatalogId = res[0].id;
          //默认第一个分类
          this.getGoodsList(res[0].id);
          resolve();
        });
      });
    },
    /**
     * 购买限制
     */
    buyLImit() {
      this.$u.api.warehouseInfoApi().then((res) => {
        this.limit = res;
        this.limitData.choose_price = this.limit.min_price;
        this.limitData.choose_num = this.limit.min_unit;
      });
    },
    /**
     * 散装还是整装
     */
    onClickItem(e) {
      this.typeId = e.id;
      // 获取分类
      this.getGoodsList(this.nowCatalogId);
    },
    /**
     * 商品list 滚动到底部
     */
    scrolltolower(e) {
      console.log(e);
      // 提前判断是否已经是 全部数据
      if (this.noMore) {
        this.loadingShow = false;
        return;
      } else {
        this.loadingShow = true;
      }
      this.page += 1;
      var from = {
        category_id: this.nowCatalogId,
        package_id: this.typeId,
        page: this.page,
      };
      this.$u.api.builderGoodsListApi(from).then((res) => {
        // 给每一个商品添加 购买数量
        res.list.map((v) => {
          v.items.map((v1) => {
            this.storeOrderList.forEach((element) => {
              if (element.goods_item_id == v1.id) {
                v1.number = element.number;
              }
            });
          });
        });
        this.goodsList.push(...res.list);
        // 商品list === 0 且 is_all == 1 不展示nomore
        if (res.list.length != 0 && res.is_all === true) {
          this.noMore = true;
          this.loadingShow = false;
        } else if (res.is_all === false && res.list.length > 0) {
          this.noMore = false;
          this.loadingShow = true;
        } else if (res.list.length === 0 && res.is_all === true) {
          this.loadingShow = false;
          this.noMore = true;
        }
        // 关闭 骨架
        this.loading = false;
      });
    },
    /**
     * 获取商品list
     */
    getGoodsList(catalogId) {
      this.goodsList = [];
      var from = {
        category_id: catalogId,
        package_id: this.typeId,
        page: this.page,
      };
      this.$u.api.builderGoodsListApi(from).then((res) => {
        // 给每一个商品添加 购买数量
        res.list.map((v) => {
          v.items.map((v1) => {
            this.storeOrderList.forEach((element) => {
              if (element.goods_item_id == v1.id) {
                v1.number = element.number;
              }
            });
          });
        });
        this.goodsList = res.list;
        // 商品list === 0 且 is_all == 1 不展示nomore
        if (res.list.length != 0 && res.is_all === true) {
          this.noMore = true;
        } else if (res.is_all === false && res.list.length > 0) {
          this.noMore = false;
        } else if (res.list.length === 0 && res.is_all === true) {
          this.loadingShow = false;
        }
        // 关闭 骨架
        this.loading = false;
      });
    },

    /**
     * 添加进货单
     */
    add(Info) {
      if (Info.items.length > 1) {
        // 多规格
        this.moreKindAdd(Info);
      } else {
        // 单规格
        this.oneKindAdd(Info.items[0]);
      }
    },
    /**
     * 减库存
     */
    reduceBuyCount(info, index) {
      this.storeOrderList.forEach((v) => {
        if (
          v.goods_item_id === info.items[0].id &&
          v.number - v.info.min_number >= 0
        ) {
          info.items[0].number -= info.items[0].min_number;
          v.number -= info.items[0].min_number;
        }
      });
    },
    /**
     * 单规格添加
     */
    oneKindAdd(info) {
      // 判断商品是否已经在 进货单里面
      if (this.jugeGoodsExit(info.id)) {
        //存在   数量增加
        this.storeOrderList.forEach((element, index) => {
          if (element.goods_item_id === info.id) {
            //判断 进货数量是否超出库存
            if (
              this.storeOrderList[index].number + element.info.min_number >
              info.storage
            ) {
              // 提示库存不足
              this.$u.toast(
                "库存不足,您已选择" + this.storeOrderList[index].number + "件"
              );
            } else {
              // 数量新增 最小数量
              this.storeOrderList[index].number += element.info.min_number;
              info.number = this.storeOrderList[index].number;
            }
          }
        });
        console.log(this.storeOrderList);
      } else {
        // 不存在 就往 订货list 添加
        var form = {
          goods_item_id: info.id,
          goods_id: info.goods_id,
          number: info.min_number,
          info: info, //商品信息
          package_type_id: info.package_type_id,
          freight: info.freight,
        };
        this.storeOrderList.push(form);
        info.number = info.min_number;
        console.log(this.storeOrderList);
      }
    },

    /**
     * 多规格添加
     */
    moreKindAdd(Info) {
      // 给每一个 规格 添加一个默认进货数量
      this.$refs.moreKinds.numberList = [];
      Info.items.map((v) => {
        // 判断该规格是否 存在进货单
        if (this.jugeGoodsExit(v.id)) {
          //
          this.storeOrderList.map((v1) => {
            if (v1.goods_item_id === v.id) {
              this.$refs.moreKinds.numberList.push({
                number: v1.number,
                cover: Info.cover,
                goods_item_id: v.id,
                goods_id: v.goods_id,
                freight: v.freight,
                package_type_id: v.package_type_id,
              });
            }
          });
        } else {
          this.$refs.moreKinds.numberList.push({
            number: 0,
            cover: Info.cover,
            goods_item_id: v.id,
            goods_id: v.goods_id,
            package_type_id: v.package_type_id,
            freight: v.freight,
          });
        }
      });
      this.$refs.moreKinds.goodsList = Info.items;
      this.$refs.moreKinds.goodsTitle = Info.title;
      this.$refs.moreKinds.cover = Info.cover;
      this.$refs.moreKinds.show = true;
    },
    /**
     * 查看进货单
     */
    lookList() {
      // 筛选掉 number === 0 的商品规格
      var truthList = [];
      // 筛选掉 number == 0
      this.storeOrderList.map((v, index) => {
        if (v.number != 0) {
          truthList.push(v);
        }
      });
      console.log();
      if (truthList.length > 0) {
        this.$u.vuex("vuex_order_list", truthList);
        uni.navigateTo({
          url: "/pages/builder/purchaseOrder",
        });
      } else {
        this.$u.toast("请选择进货商品");
      }
    },

    /**
     * 判断进货单 添加的商品id 是否存在
     */
    jugeGoodsExit(goodsId) {
      var idList = [];
      this.storeOrderList.map((v) => {
        idList.push(v.goods_item_id);
      });
      return idList.includes(goodsId);
    },

    // 点击左边的栏目切换
    async swichMenu(index, item) {
      this.loadingShow = false; //加载更多数据
      this.noMore = false; //是否有多个分页
      this.page = 1;
      // 当前分类id
      this.nowCatalogId = item.id;
      this.getGoodsList(item.id);

      if (index == this.current) return;
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect("menu-scroll-view", "menuHeight");
        await this.getElRect("u-tab-item", "menuItemHeight");
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop =
        index * this.menuItemHeight +
        this.menuItemHeight / 2 -
        this.menuHeight / 2;
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select("." + elClass)
          .fields({ size: true }, (res) => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
              setTimeout(() => {
                this.getElRect(elClass);
              }, 10);
              return;
            }
            this[dataVal] = res.height;
          })
          .exec();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.choose-type {
  background-color: #d65c45;
  color: #ffffff;
}
.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
  .radio-choose {
    margin: 20rpx 20rpx;
    // border-bottom: 10rpx solid #d65c45;
    background-color: #ffffff;
    border-radius: 70rpx;
    font-size: 36rpx;
    font-weight: bold;
    .type-list {
      @include flex-row;
      height: 100rpx;
      // padding: 20rpx;
      & > view {
        flex: 1;
        height: 100%;
        line-height: 100rpx;
        text-align: center;
      }
      & > view:nth-child(1) {
        border-top-left-radius: 70rpx;
        border-bottom-left-radius: 70rpx;
      }
      & > view:nth-child(2) {
        border-top-right-radius: 70rpx;
        border-bottom-right-radius: 70rpx;
      }
    }
  }
  .limit {
    padding: 20rpx 0;
    text-align: center;
    color: #999999;
    & > view {
      padding: 2rpx 0;
      .price {
        color: red;
      }
      .icon {
        color: #18b566;
        margin-left: 10rpx;
      }
    }
  }
  .bottom-bar {
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .submit {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 100rpx;
      align-items: center;
      padding: 0 50rpx;
      border-top: 1rpx solid #e6e6e6;
      .freight {
        color: #999999;
        font-size: 24rpx;
      }
      & > view:nth-child(1) {
        color: #d65c45;
        font-size: 32rpx;
        font-weight: blod;
        margin-right: 20rpx;
      }
      & > view:nth-child(2) {
        color: #333333;
        font-size: 24rpx;
        text-align: center;
      }
    }
    .price {
      width: 240rpx;
      height: 100rpx;
      background-color: #d65c45;
      color: #ffffff;
      line-height: 100rpx;
      text-align: center;
      font-size: 28rpx;
    }
  }
  .u-menu-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
  }
}

.u-tab-view {
  width: 246rpx;
  //   height: 100%;
  background-color: #FFFFFF;
  margin-bottom: 100rpx;
}

.u-tab-item {
  height: 96rpx;
  background: #FFFFFF;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 26rpx;
  color: #5C6166;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #12202E;
  font-weight: 600;
  background: #E6E6E6;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
}

// .u-tab-item-active::before {
//   content: "";
//   position: absolute;
//   border-left: 4px solid #d65c45;
//   height: 80%;
//   left: 0;
//   color: #d65c45;
//   border-radius: 3rpx;
// }

.u-tab-view {
  height: 100%;
}
.right-box {
  background-color: rgb(250, 250, 250);
}
.page-view {
  padding: 16rpx;
}
.buy-num {
  @include flex-row;
  .jian {
    color: #dcdcdc;
    font-size: 48rpx;
    margin-right: 20rpx;
  }
  .jia {
    color: #d65c45;
    font-size: 50rpx;
    margin-left: 20rpx;
  }
  .num {
    color: #333333;
    font-size: 28rpx;
    font-weight: bold;
  }
}
.foods-info {
  height: 200rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  // border-bottom: 0.5rpx solid #e6e6e6;
  .image-contair {
    width: 50 * 3rpx;
    height: 50 * 3rpx;
    position: relative;
    display: inline-block;
    .image {
      width: 50 * 3rpx;
      height: 50 * 3rpx;
      border-radius: 20rpx;
      // margin-top: 16rpx;
      // margin-right: 10rpx;
    }
    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #000;
      border-radius: 10rpx;
      opacity: 0.5;
      top: 0;
      color: #ffffff;
      text-align: center;
      line-height: 150rpx;
    }
  }

  .foods-detail {
    flex: 1;
    // height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20rpx;

    //   background-color: red;

    .foods-price-car {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .add-car {
        color: #d65c45;
        font-size: 48rpx;
      }
      .foods-price {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        & > view:nth-child(1) {
          font-size: 24rpx;
          color: #999999;
          margin-right: 20rpx;
        }
      }
    }
    .foods-title {
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;
    }
    .foods-stock {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 10rpx 0;
      color: #333333;
      & > view:nth-child(1) {
        margin-right: 50rpx;
        font-size: 28rpx;
        color: #d65c45;
      }
      & > view:nth-child(2) {
        font-size: 24rpx;
      }
    }
  }
}
</style>
